/* 整体容器样式 */
.audio-container {
    position: fixed;
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: #fff;
    width: 120%;
    bottom: -18px;
    left: 25px;
}

/* 音频控件样式 */
audio {
    width: 65%;
    margin-left: -44px;
    outline: none; /* 去除默认的外边框 */
}

/* 自定义上一首、播放/暂停、下一首按钮样式 */
.audio-controls button {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 50%;
    padding: 10px;
    font-size: 20px;
    margin: 0 10px;
    cursor: pointer;
}

/* 循环播放按钮样式 */
.loop-button {
    background-color: #55606b;
    color: #fff;
    border: none;
    border-radius: 50%;
    padding: 10px;
    margin-left: 10px;
    cursor: pointer;
}

.loop-button.active {
    background-color: #00ff00; /* 激活状态的背景颜色 */
}
/* 美化样式，根据需要自定义 */
.sidebar {
    position: fixed;
    right: -300px; /* 初始状态，侧边栏收起 */
    top: 50%;
    background-color: #333;
    width: 300px;
    height: 100%;
    transform: translateY(-50%);
    transition: right 0.3s ease-in-out;
    z-index: 999;
}

.sidebar.active {
    right: 0; /* 展开状态，侧边栏完全显示 */
}

.toggle-button {
    position: fixed;
    right: 0;
    top: 50%;
    background-color: #333;
    color: #fff;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    z-index: 1000;
}

.content {
    padding: 20px;
    color: #fff;
}

.content p {
    margin: 0;
}